<template>
  <div class="live-row" @click.stop="jumpLive">
    <div class="left-container">
      <div class="cover">
        <img :src="info.cut_img" alt="" />
      </div>
      <div class="live-info-alt">
        <icon type="liveBanner" v-if="button.status === '直播中'"></icon>
        <div v-else class="live-info-btn" :style="{ background: button.bg }">
          {{ button.status }}
        </div>
        <span v-if="getAlt()">{{ getAlt() }}</span>
      </div>
    </div>
    <div class="right-container">
      <div class="live-title">
        {{ info.title }}
      </div>
      <div class="live-lecture">{{ info.host }}</div>
    </div>
  </div>
</template>

<script>
import icon from '../Icon.vue';
export default {
  name: 'LiveRow',
  components: { icon },
  data() {
    return {};
  },
  props: {
    info: {
      type: Object,
      default: () => ({}),
    },
  },
  computed: {
    button({ info }) {
      let status;
      let color;
      let action;
      let bg;
      const livingColor = '#FF2436';
      const activeColor = '#FF9500';
      const banColor = '#3366FF';
      const allowd = '#FFFFFF';
      const nowAllowd = '#000000';
      switch (String(info.status)) {
      case '1': {
        status = '直播中';
        bg = livingColor;
        action = '看直播';
        color = allowd;
        break;
      }
      case '2': {
        status = '已结束';
        bg = activeColor;
        action = '';
        color = allowd;
        break;
      }
      case '3': {
        status = '已结束';
        bg = activeColor;
        action = '看回放';
        color = allowd;
        break;
      }
      case '4': {
        status = '预告';
        bg = banColor;
        action = '已预约';
        color = nowAllowd;
        break;
      }
      case '5': {
        status = '预告';
        bg = banColor;
        action = '待开播';
        color = nowAllowd;
        break;
      }
      case '6':
      default: {
        status = '预告';
        bg = banColor;
        action = '预约';
        color = allowd;
        break;
      }
      }
      const param = {
        status,
        color,
        action,
        bg,
      };
      return param;
    },
  },
  methods: {
    jumpLive() {
      _t.jumpBy2804(this.info.link);
    },
    // 根据状态展示直播热度或直播时间
    getAlt() {
      const status = String(this.info.status);
      const end = ['2', '3', '4', '5', '6'];
      try {
        if (end.indexOf(status) > -1) {
          return this.formatTime(this.info.start_time);
        } else {
          return '';
        }
      } catch (error) {
        return '';
      }
    },
    formatTime(str) {
      const start = 5;
      const length = 11;
      return str.substr(start, length);
    },
  },
};
</script>

<style lang="less" scoped>
.live-row {
  display: flex;
  height: 1.48rem;
}
.left-container {
  width: 2.63rem;
  height: 1.48rem;
  margin-right: 0.16rem;
  position: relative;
  .cover {
    width: 2.63rem;
    height: 1.48rem;
    border-radius: 0.08rem;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .live-info-alt {
    height: 0.32rem;
    background: rgba(0, 0, 0, 0.52);
    border-radius: 0.04rem;
    font-size: 0.22rem;
    line-height: 0.32rem;
    color: #ffffff;
    display: flex;
    position: absolute;
    left: 0.12rem;
    top: 0.12rem;
    span {
      padding: 0 0.08rem;
    }
  }
}

.live-info-btn {
  height: 0.32rem;
  line-height: 0.32rem;
  background: #3366ff;
  border-radius: 0.04rem;
  padding: 0 0.08rem 0;
  font-size: 0.22rem;
  color: #ffffff;
}
.right-container {
  width: 4.07rem;
  height: 1.48rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .live-title {
    width: 4.07rem;
    height: 0.84rem;
    font-size: 0.28rem;
    line-height: 0.42rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .live-lecture {
    height: 0.3rem;
    font-size: 0.24rem;
    color: #999999;
    line-height: 0.3rem;
  }
}
</style>
